<template>
  <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" height="auto" :left="uiLeft" :top="60">
    <div class="box">
      <div class="item1">
        <div class="key">静态服务:</div>
        <el-select v-model="currentModelIdRef" placeholder="请选择" clearable>
          <el-option v-for="item in modelListsRef" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </div>
      <div class="tabs">
        
        <div class="tab-item" v-for="(item, index) in tabs" :key="index" @click="clickItem(item)"
          :class="{ 'info-actived': item.checked }">{{ item.name }}</div>
      </div>
      <div class="tabs-info">
        <div class="item1">
          <div class="key">采样间隔:</div>
          <el-input v-model.lazy="sampleDistance" type="number" :min="0.01" :step="0.1"
            @change="changeSampleDistance" />
        </div>
        <div style="margin-bottom: 10px;">
          <el-button @click="startDraw" :disabled="!currentModelIdRef">开始绘制</el-button>
          <el-button @click="startAnalyse" :disabled="!currentModelIdRef">开始分析</el-button>
          <el-button @click="volumeMeasurement" :disabled="!currentModelIdRef"
            v-if="currentAnalyse.name == '方量分析'">体积测量</el-button>

        </div>
        <div class="item1" v-if="!errorInfoRef && pointsRef && pointsRef.length">
          <div class="key">处理时间:</div>
          <div>{{ durationRef }}</div>
        </div>
        <div class="item1" v-if="!errorInfoRef && pointsRef && pointsRef.length && currentAnalyse.name == '方量分析'">
          <div class="key">挖方:</div>
          <div>{{ wafangRef ? wafangRef.toFixed(2) : 0 }}m³</div>
        </div>
        <div class="item1" v-if="!errorInfoRef && pointsRef && pointsRef.length && currentAnalyse.name == '方量分析'">
          <div class="key">填方:</div>
          <div>{{ tianfangRef ? tianfangRef.toFixed(2) : 0 }}m³</div>
        </div>
        <div class="item1" v-if="!errorInfoRef && pointsRef && pointsRef.length">
          <div class="key">插值点个数:</div>
          <div>{{ pointsRef.length }}</div>
        </div>
        <div class="item1" v-if="errorInfoRef">
          <div class="key">错误信息:</div>
          <div>{{ errorInfoRef }}</div>
        </div>
        <div class="echart" v-if="!errorInfoRef && pointsRef && pointsRef.length && !isVolume">
          <EchartsView :data="setOption()" />
        </div>

      </div>
    </div>
  </Dialog>

</template>
<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "earthsdk-ui";
import Dialog from "../../components/Dialog.vue";
import { onBeforeUnmount, ref, onMounted, computed, watch, onUnmounted } from "vue";
import { getProjectManager } from "../../scripts/getProjectManager";
import { ElMessage } from "element-plus";
import EchartsView from "@/components/EchartsView.vue";
import { duanmianOption, fanggliangOption } from "@/scripts/echarts/analyse.ts";


const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const uiLeft = ref(document.body.clientWidth - 10 - 350);

const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelser2Manager = objm.modelser2Manager;

const analyse = modelser2Manager.analyse as any
// 静态服务列表列表
const modelListsRef = toVR<any>(d, [analyse, "modelLists"]);
// 选中的静态服务id
const currentModelIdRef = toVR<any>(d, [analyse, "currentModelId"]);
// 选中的分析
const currentAnalyseRef = toVR<any>(d, [analyse, "currentAnalyse"]);
// 持续时间
const durationRef = toVR<any>(d, [analyse, "duration"]);
// 差值点位个数
const pointsRef = toVR<any>(d, [analyse, "points"]);
// 挖方
const wafangRef = toVR<any>(d, [analyse, "wafang"]);
// 填方
const tianfangRef = toVR<any>(d, [analyse, "tianfang"]);
// 选中的分析
const errorInfoRef = toVR<any>(d, [analyse, "errorInfo"]);
// 采样间距
const sampleDistance = ref(0.1);

const tabs = ref([
  {
    name: '断面分析',
    checked: true,
  },
  {
    name: "方量分析",
    checked: false,
  },
])

// 当前选中分析
const currentAnalyse = ref({
  name: "断面分析",
  checked: true,
})

// 点击tab
const clickItem = (item: any) => {
  tabs.value.map((e) => e.checked = false)
  item.checked = true
  currentAnalyse.value = item
  currentAnalyseRef.value = item.name
  sampleDistance.value = 0.1
}

const changeSampleDistance = (val: number) => {
  // 将输入值强制转换为数字，并确保不小于 0.1
  const numValue = Number(val);
  if (!numValue || numValue < 0.01 || isNaN(numValue)) {
    sampleDistance.value = 0.1
  }
}

// 开始绘制
const startDraw = () => {
  console.log(analyse.analyseResettting.obj);
  analyse.analyseResettting.obj.drawEvent.emit()
}

// 开始分析
const startAnalyse = () => {

  const type = currentAnalyse.value.name
  const points = analyse.analyseResettting.obj.sceneObject.points
    isVolume.value = false

  if (type == "断面分析") {
    if (!points || !points.length) {
      ElMessage.warning(`请先绘制分析线`)
      return
    }
    if (points.length < 2) {
      ElMessage.warning(`绘制的点位需要大于等于2`)
      return
    }
    const param = {
      serviceid: currentModelIdRef.value,
      sampleDistance: Number(sampleDistance.value),
      fenxi: [
        {
          userdata: "",
          linestring: points
        }
      ]
    }
    console.log(param);
    analyse.analyse("断面分析", param)
  } else {
    if (!points || !points.length) {
      ElMessage.warning(`请先绘制分析面`)
      return
    }
    if (points.length < 3) {
      ElMessage.warning(`绘制的点位需要大于等于3`)
      return
    }
    const arr = points.map((item: any, index: number) => item[2])
    const min = Math.min(...arr)
    const max = Math.max(...arr)
    console.log("点位", points);
    console.log("基准面", (min + max) / 2);

    const param = {
      serviceid: currentModelIdRef.value,
      sampleDistance: Number(sampleDistance.value),
      fenxi: [
        {
          userdata: "",
          height: (min + max) / 2,
          polygon: points
        }
      ]
    }
    console.log(param);
    analyse.analyse("方量分析", param)
  }



}

const isVolume = ref(false)

// 体积测量
const volumeMeasurement = () => {
  const points = analyse.analyseResettting.obj.sceneObject.points

  if (!points || !points.length) {
    ElMessage.warning(`请先绘制分析面`)
    return
  }
  if (points.length < 3) {
    ElMessage.warning(`绘制的点位需要大于等于3`)
    return
  }
  isVolume.value = true

  const arr = points.map((item: any, index: number) => item[2])
  const min = Math.min(...arr)
  const max = Math.max(...arr)

  const positions = points.map((e: any) => [e[0], e[1], e[2]])
  const param = {
    planeHeight: (min + max) / 2,
    gridWidth: Number(sampleDistance.value),
    points: positions
  }
  analyse.volumeMeasurement(param)
}

const setOption = () => {
  if (isVolume.value) return;
  if (currentAnalyseRef.value === '断面分析') {
    return duanmianOption(pointsRef.value)
  } else {
    return fanggliangOption(pointsRef.value)
  }
}


onMounted(() => {
  analyse.getModelList()
  currentAnalyseRef.value = '断面分析'
});

onUnmounted(() => {
  analyse.clear()
})
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.tabs {
  width: 200px;
  height: 30px;
  background: #F0F0F0;
  border-radius: 4px;
  display: flex;
}

.tab-item {
  height: 100%;
  text-align: center;
  line-height: 30px;
  width: 50%;
  border-radius: 4px;
  cursor: pointer;
}

.info-actived {
  color: #fff;
  background-color: #537cfe;
}

.echart {
  width: 100%;
  min-height: 200px;
  height: calc(100% - 137px);
}

.tabs-info {
  width: 100%;
  height: calc(100% - 82px);

}
</style>
